<template>
  <div class="home">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>主账号</span>
      </div>
      <div class="card-content">
        <div style="margin: 5px 0">
          <el-tag>主账号ID：asdkfakdsasdf</el-tag>
        </div>
        <div style="margin: 5px 0">
          <el-tag type="success">手机号：31234132414</el-tag>
        </div>
        <div style="margin: 5px 0">
          <el-tag type="info">绑定微信号：32423424</el-tag>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>子账号</span>
      </div>
      <div class="card-content">
        <div style="padding-bottom: 20px">
          <el-tag type="warning" style="margin-right:20px">子账号：asdfafac</el-tag>
          <el-tag type="danger" style="margin-right:20px">密码：adfacasdfas</el-tag>
          <el-button size="mini" type="text" style="margin-right:20px">修改密码</el-button>
        </div>
        <el-table border :data="tableData" stripe style="width: 100%">
          <el-table-column prop="id" align="center" label="操作员ID号"></el-table-column>
          <el-table-column prop="first" align="center" label="主功能管理"></el-table-column>
          <el-table-column prop="do" align="center" label="操作"></el-table-column>
          <el-table-column prop="time" align="center" label="操作时间"></el-table-column>
          <el-table-column prop="info" align="center" label="具体信息">
            <template>
              <el-button size="mini" type="text">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'setting',
  data() {
    return {
      tableData: [{
        id: 111,
        first: '商品管理',
        do: '修改团购',
        time: '2019/03/24 12:23:43',
        info: '商品管理'
      }, {
        id: 111,
        first: '商品管理',
        do: '修改团购',
        time: '2019/03/24 12:23:43',
        info: '商品管理'
      }, {
        id: 111,
        first: '商品管理',
        do: '修改团购',
        time: '2019/03/24 12:23:43',
        info: '商品管理'
      }, {
        id: 111,
        first: '商品管理',
        do: '修改团购',
        time: '2019/03/24 12:23:43',
        info: '商品管理'
      }]
    }
  }
}
</script>

<style scope lang="stylus" rel="stylesheet/stylus">
.home
  padding-top 10px
.box-card
  margin-bottom 20px
.card-item
  text-align center
  padding-top 10px
  .part-center
    font-size 40px
    line-height 80px
    margin-top 10px
    font-weight bold
    color #ff9900
</style>